import React, { useState, useCallback } from 'react'
import { List, InputItem, Button, Toast, Flex } from 'antd-mobile'
import { createForm } from 'rc-form'
import { message } from 'antd'

// const Item = List.Item

class BasicInput extends React.Component {
  state = {
    value: 1,
  }

  onSubmit = () => {
    this.props.form.validateFields({ force: true }, (error) => {
      if (!error) {
        this.props.submit(this.props.form.getFieldsValue())
      } else {
        message.error('请完善信息')
      }
    })
  }

  render() {
    const { getFieldProps, getFieldError, resetFields } = this.props.form

    return (<form>
      <List
        renderHeader={() => '请输入手机号进行绑定'}
      // renderFooter={() => getFieldError('username') && getFieldError('username').join(',')}
      >
        {/* <InputItem
          {...getFieldProps('username', {
            rules: [
              { required: true, message: '姓名不能为空' }
            ]
          })}
          clear
          error={!!getFieldError('username')}
          onErrorClick={() => {
            Toast.fail(getFieldError('username').join('、'))
          }}
          placeholder='请输入姓名'
        >姓名</InputItem> */}
        {/* <Picker extra='请选择(可选)'
          data={[{ label: '男', value: 1 }, { label: '女', value: 0 }]}
          title='性别'
          {...getFieldProps('district', {
            initialValue: ['1'],
          })}
          onOk={e => console.log('ok', e)}
          onDismiss={e => console.log('dismiss', e)}
        >
          <List.Item arrow='horizontal'>性别</List.Item>
        </Picker> */}
        {/* <InputItem
          {...getFieldProps('userId', {
            rules: [
              { required: true, message: '身份证号不能为空' }
            ],
          })}
          clear
          error={!!getFieldError('userId')}
          onErrorClick={() => {
            Toast.fail(getFieldError('userId').join('、'))
          }}
          placeholder='请输入身份证号'
        >身份证号</InputItem> */}
        <InputItem
          // extra={<SendCode />}
          {...getFieldProps('phone', {
            rules: [
              { required: true, message: '手机号不能为空' }
            ],
          })}
          clear
          error={!!getFieldError('phone')}
          onErrorClick={() => {
            Toast.fail(getFieldError('phone').join('、'))
          }}
          placeholder='请输入手机号'
        >手机号</InputItem>
        {/* <InputItem
          extra={<Icon type='eye' />}
          {...getFieldProps('password', {
            rules: [
              { required: true, message: '密码不能为空' }
            ],
          })}
          clear
          error={!!getFieldError('password')}
          onErrorClick={() => {
            Toast.fail(getFieldError('password').join('、'))
          }}
          placeholder='请输入手机号'
        >密码</InputItem> */}
        {/* <InputItem
          {...getFieldProps('phonecode', {
            rules: [
              { required: true, message: '验证码不能为空' }
            ],
          })}
          clear
          error={!!getFieldError('phonecode')}
          onErrorClick={() => {
            Toast.fail(getFieldError('phonecode').join('、'))
          }}
          placeholder='请输入验证码'
        >验证码</InputItem> */}
        {/* <Picker extra='请选择(可选)'
          data={[{ label: '是', value: 1 }, { label: '否', value: 0 }]}
          title='是否是企业'
          {...getFieldProps('iscompany', {
            initialValue: ['1'],
          })}
          onOk={e => console.log('ok', e)}
          onDismiss={e => console.log('dismiss', e)}
        >
          <List.Item arrow='horizontal'>是否是企业</List.Item>
        </Picker> */}
        {/* <InputItem
          {...getFieldProps('companyName', {
            rules: [
              { required: true, message: '公司名称不能为空' }
            ],
          })}
          clear
          error={!!getFieldError('companyName')}
          onErrorClick={() => {
            Toast.fail(getFieldError('companyName').join('、'))
          }}
          placeholder='请输入公司名称'
        >公司名称</InputItem> */}
        {/* <InputItem
          {...getFieldProps('companyCode', {
            rules: [
              { required: true, message: '企业信用代码不能为空' }
            ],
          })}
          clear
          error={!!getFieldError('companyCode')}
          onErrorClick={() => {
            Toast.fail(getFieldError('companyCode').join('、'))
          }}
          placeholder='请输入企业信用代码'
        >企业信用代码</InputItem> */}
        <Flex justify='around' style={{ padding: '16px' }}>
          <Button type='primary' size='small' inline onClick={this.onSubmit}>提交</Button>
          <Button size='small' inline style={{ marginLeft: '2.5px' }} onClick={() => resetFields()}>重置</Button>
        </Flex>
      </List>
    </form>)
  }
}

// const SendCode = () => { // 发送验证码
//   const [count, setCount] = useState(60)
//   const [isShowCode, setIsShowCode] = useState(false)

//   const send = useCallback(() => {
//     if (isShowCode) {
//       return
//     }
//     setIsShowCode(true)
//     const active = setInterval(() => {
//       setCount((preSecond) => {
//         if (preSecond <= 1) {
//           setIsShowCode(false)
//           clearInterval(active)
//           // 重置秒数
//           return 60
//         }
//         return preSecond - 1
//       })
//     }, 1000)
//     let tm = null
//     clearTimeout(tm)
//     tm = setTimeout(() => {
//       message.success('验证码发送成功！')
//     }, 500)


//   }, [count])

//   return (
//     isShowCode
//       ? <a disabled>再次发送（{count}）</a>
//       : <a style={{ color: '#108ee9' }} onClick={send}> 发送验证码</a>
//   )
// }

const BasicInputWrapper = createForm()(BasicInput)
export default BasicInputWrapper
